<template>
  <div class="roleDetail">
    <el-form class="form" label-width="auto">
      <el-form-item>
        <el-text style="margin-right: 20px; font-size: larger; font-weight: bolder;">
          <template v-if="!data.role.id">
            {{ util.language('新增', 'New ') }}
          </template>
          <template v-else>
            {{ util.language('编辑', 'Edit ') }}
          </template>
          {{ util.language('角色', 'Role') }}
        </el-text>
        <el-button-group>
          <el-button @click="router.go(-1)">{{ util.language('返回', 'Back') }}</el-button>
          <el-button type="primary" @click="save()" :loading="loading.save">{{ util.language('保存', 'Save') }}</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item label="ID" v-if="data.role.id">
        <el-input v-model="data.role.id" disabled />
      </el-form-item>
      <el-form-item :label="util.language('角色名称', 'Role Name')">
        <el-input v-model="data.role.name" />
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item :label="util.language('菜单', 'Menu')">
            <el-card style="width: 100%;max-height: calc(100vh - 260px); overflow: auto;" shadow="hover">
              <el-tree ref="menusRef" :data="show.menus" :props="{ label: util.language(), children: 'pages' }" :default-checked-keys="show.menusDefault" node-key='path' show-checkbox />
            </el-card>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="util.language('权限', 'Auth')">
            <el-card style="width: 100%;max-height: calc(100vh - 260px); overflow: auto;" shadow="hover">
              <el-tree ref="authsRef" :data="show.auths" :props="{ label: 'label' }" :default-checked-keys="show.authsDefault" node-key='auth' show-checkbox />
            </el-card>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import api from '../../apis/api'
import cache from '../../utils/cache'
import menusConf from '../../router/menusConf'
import util from '../../utils/util'

const menus = menusConf.filter(false)

const router = useRouter()
const menusRef = ref()
const authsRef = ref()
const loading = reactive({
  save: false
})
const show = reactive({
  menus: menus,
  menusDefault: [],
  auths: [],
  authsDefault: [],
})
const pageParam = cache.getObject(cache.keys.pageParam + "roleDetail")
if (pageParam) {
  show.menusDefault = pageParam.menuList || []
  show.authsDefault = pageParam.authList || []
}
const data = reactive({
  role: pageParam ? JSON.parse(JSON.stringify(pageParam)) : {}
})

api.get('/backend/role/getAllAuth').then(res => {
  show.auths = res.authList.map(a => { return { label: util.language(a.cnName, a.enName), auth: a.auth } })
})

const save = () => {
  loading.save = true
  const selectedMenus = menusRef.value.getCheckedNodes().filter(m => m.path).map(m => m.path)
  const selectedAuths = authsRef.value.getCheckedNodes().map(m => m.auth)
  data.role.menuList = selectedMenus
  data.role.authList = selectedAuths
  if (!data.role.id) {
    api.post('/backend/role/add', data.role).then(() => {
      ElMessage.success(util.language('保存成功', 'success'))
      router.go(-1)
    }).finally(() => {
      loading.save = false
    })
  } else {
    api.post('/backend/role/setById', data.role).then(() => {
      ElMessage.success(util.language('保存成功', 'success'))
      router.go(-1)
    }).finally(() => {
      loading.save = false
    })
  }
}

</script>

<style lang="less">
.roleDetail {
  margin: auto;
  max-width: 900px;
}
</style>